<template>
  <div class="honor">
    <div class="honor-content honor-width" ref="themeRef">
      <Title title="专题专栏" pinyin="ZHUAN TI ZHUAN LAN"/>
      <!--      <div class="marquee">-->
      <!--        <div class="marquee-b">-->
      <!--          <marquee-text :duration="30" :repeat="3" :paused="paused">-->
      <!--            <div class="marquee-box">-->
      <!--              <div class="marquee-content" v-for="item in zt" :key="item.id" @click="handleOut(item.href)"-->
      <!--                   @mouseenter="mouseEnter"-->
      <!--                   @mouseleave="mouseLeave">-->
      <!--                <img :src="item.filePath" style="width: 100%;height: 100%;object-fit: cover;" alt=""/>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </marquee-text>-->
      <!--        </div>-->
      <!--      </div>-->
      <div>
        <el-row :gutter="20">
          <el-col :span="4" v-for="item in zt" :key="item.id" @click="handleOut(item.href)">
            <div :style="themeHeight" @click="handleOut(item.href)">
              <img :src="item.filePath" style="width: 100%;height: 100%;object-fit: cover;" alt=""/>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import './layout.css'

import Title from "@/components/Title.vue";
// import MarqueeText from "vue-marquee-text-component";
import { getTopicListApi } from "@/api/home";

export default {
  components: {Title},
  data() {
    return {
      paused: false,
      listData: [1, 2, 3, 4, 5, 6],
      zt: [],
      classOption: {
        limitMoveNum: 1,
        direction: 2,
        step: 0.3
      },
      themeHeight: ''
    }
  },
  // watch: {
  //   ztzlList: {
  //     handler(data) {
  //       this.zt = data[0].hasChildren ? data[0].children : data[0].articleList
  //     },
  //     deep: true
  //   },
  // },
  mounted() {
    this.init()
    this.themeHeight = `height: ${ (this.$refs.themeRef.offsetWidth / 6) * 0.4 }px;margin-bottom: 12px`
  },
  methods: {
    async init() {
      this.zt = await getTopicListApi()
      // this.zt = [{id: 1}, {id: 2},{id: 3},{id: 4},{id: 5},{id: 6},{id: 7},{id: 8}]
    },
    // mouseEnter() {
    //   this.paused = true
    // },
    // mouseLeave() {
    //   this.paused = false
    // },
    handleOut(path) {
      if (path) {
        window.open(path);
      }
    },
  }
}
</script>

<style lang="less" scoped>
.honor {
  width: 100%;
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.honor-content {
  //width: 1200px;
  display: flex;
  flex-direction: column;
  z-index: 99;
}

.honor-width {
  //width: 1200px;
  display: flex;
  flex-direction: column;
  z-index: 99;
}

@media screen and (min-width: 1300px) {
  .honor-width {
    width: 1200px;
  }

  .honor-height {
    height: 80px;
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 1800px) {
  .honor-width {
    width: 1400px;
  }

  .honor-height {
    height: 80px;
    margin-bottom: 10px;
  }
}

@media screen and (min-width: 2000px) {
  .honor-width {
    width: 1920px;
  }

  .honor-height {
    height: 80px;
    margin-bottom: 10px;
  }
}


//*,
//::before,
//::after {
//  box-sizing: border-box;
//  margin: 0;
//  padding: 0;
//}

//.marquee {
//  //padding: 0 12px;
//  //background: #4E5969;
//  width: 100%;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  margin-bottom: 40px;
//
//  .marquee-b {
//    width: 1200px;
//    display: flex;
//    flex-direction: column;
//
//    .marquee-box {
//      display: flex;
//
//      .marquee-content {
//        width: 164px;
//        height: 80px;
//        cursor: pointer;
//        //border: 1px solid #000;
//        margin: 0 8px;
//        background: #237CBE;
//      }
//    }
//  }
//}
</style>
